<template>
  <div class="wap">
    <!-- -->
    <div class="login">
      <div class="user">
        <span>输入用户名:</span>
        <input :class="usersty ? 'stress':''"
               type="text"
               v-model="user"
               @click="inputClick(0)"
               placeholder="5~12位数字、字母(大写或小写)或混合">
      </div>
      <div class="user">
        <span>输入手机号:</span>
        <input :class="phonesty ? 'stress':''"
               type="text"
               v-model="phone"
               @click="inputClick(3)"
               placeholder="请输入您的手机号">
      </div>
      <div class="sex">
        <span>性&nbsp;&nbsp;&nbsp;&nbsp;别:</span>
        <el-radio-group v-model="sex">
          <el-radio value="男"
                    size="large">男</el-radio>
          <el-radio value="女"
                    size="large">女</el-radio>
        </el-radio-group>
      </div>
      <div class="pwd">
        <span>输入密码:</span>
        <input :class="pwdsty ? 'stress':''"
               :type="show1 ? 'password':'text'"
               v-model="pwd"
               @click="inputClick(1)"
               placeholder="6~12位包含字母(大写或小写)和数字">
        <img src="/imgs/yanjing.png"
             alt=""
             @click="yanjing1">
      </div>
      <div class="pwd">
        <span>确认密码:</span>
        <input :class="verify_pwdsty ? 'stress':''"
               :type="show2 ? 'password':'text'"
               v-model="verify_pwd"
               @click="inputClick(2)"
               placeholder="6~12位包含字母(大写或小写)和数字">
        <img src="/imgs/yanjing.png"
             alt=""
             @click="yanjing2">
      </div>
      <div class="head_img">
        <span>选择您的头像:</span>
        <div>
          <el-upload ref="fileList"
                     v-model="fileList"
                     :action="`http://localhost:3000/api/upload?username=${user}`"
                     list-type="picture-card"
                     :on-preview="handlePictureCardPreview"
                     :on-remove="handleRemove"
                     :limit="1"
                     name="files"
                     :auto-upload="false">
            <!-- <el-button type="primary"> -->
            <el-icon>
              <Plus />
            </el-icon>
            <!-- </el-button> -->
          </el-upload>

          <el-dialog v-model="dialogVisible">
            <img width="100%"
                 :src="dialogImageUrl"
                 alt="" />
          </el-dialog>

        </div>
      </div>
      <div>
        <button class="login_but"
                @click="register">注册</button>
        <button class="register_but"
                @click="back_login">返回</button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import axios from '@/axios'
import { useRouter } from 'vue-router'
// import bus from '@/bus'
// import { useCounterStore } from '@/stores/ceshi'
import { ElMessage, ElLoading } from 'element-plus'
export default {
  setup() {
    // const { proxy } = getCurrentInstance()
    // const store = useCounterStore()
    //路由跳转
    const router = useRouter()
    //用户名
    let user = ref('')
    const userName = /^[A-Za-z0-9]{5,12}$/
    //密码
    let pwd = ref('')
    const pwdName = /^(?=.*[0-9])(?=.*[a-zA-Z]).{6,12}$/
    //验证码
    let verify_pwd = ref('')
    //眼睛
    let show1 = ref(true)
    let show2 = ref(true)
    //功能
    let feature = ref('')
    //性别
    let sex = ref('男')
    //手机号
    let phone = ref('')
    const phoneName = /^1[3456789]\d{9}$/
    //错误提示语
    let useMsg = function (a, b) {
      return ElMessage({
        message: a,
        type: b,
        offset: 150,
        duration: 5000,
        center: true
      })
    }
    //账号错误输入框提示
    let usersty = ref(false)
    //密码错误输入框提示
    let pwdsty = ref(false)
    //确认密码错误输入框提示
    let verify_pwdsty = ref(false)
    //手机号错误输入框提示
    let phonesty = ref(false)
    //点击输入框去除提示
    const inputClick = (a) => {
      if (a == 0) {
        usersty.value = false
      } else if (a == 1) {
        pwdsty.value = false
      } else if (a == 2) {
        verify_pwdsty.value = false
      } else {
        phonesty.value = false
      }
    }
    //点击查看密码
    const yanjing1 = () => {
      if (show1.value) {
        show1.value = false
        if (!show1.value) {
          setTimeout(() => {
            show1.value = true
          }, 3000)
        }
      }
    }
    const yanjing2 = () => {
      if (show2.value) {
        show2.value = false
        if (!show2.value) {
          setTimeout(() => {
            show2.value = true
          }, 3000)
        }
      }
    }
    //头像上传
    let fileList = ref()
    let dialogImageUrl = ref('')
    let dialogVisible = ref(false)
    let handleRemove = (file, fileList) => {
      console.log(file, fileList)
      // 可以在这里添加额外的删除逻辑，比如从服务器删除文件等
    }
    let handlePictureCardPreview = (file) => {
      dialogImageUrl.value = file.url
      dialogVisible.value = true
    }
    onMounted(() => {})
    onUnmounted(() => {})
    //返回登录页
    const back_login = () => {
      // console.log('jhfjhdrtu')
      router.replace('/login')
    }
    //传送注册数据
    const register = () => {
      if (userName.test(user.value)) {
        if (phoneName.test(phone.value)) {
          if (pwdName.test(pwd.value)) {
            if (pwd.value == verify_pwd.value) {
              axios
                .post('/register', {
                  username: user.value,
                  password: pwd.value,
                  gender: sex.value,
                  phone: phone.value
                })
                .then((d) => {
                  if (d == '注册成功，请重新登录') {
                    usersty.value = false
                    pwdsty.value = false
                    verify_pwdsty.value = false
                    phonesty.value = false
                    fileList.value.submit()
                    const loading = ElLoading.service({
                      lock: true,
                      text: '注册中，请稍等',
                      background: 'rgba(0, 0, 0, 0.7)'
                    })
                    setTimeout(() => {
                      loading.close()
                      router.replace('/')
                      //提示注册成功
                      useMsg(d, 'success')
                      //清空输入框
                      user.value = ''
                      pwd.value = ''
                      verify_pwd.value = ''
                      phone.value = ''
                      fileList.value.handleRemove(fileList.value)
                    }, 2000)
                  } else if (d == '用户已存在') {
                    usersty.value = true
                    useMsg('账号已存在,请重新输入', 'error')
                    user.value = ''
                  } else {
                    pwdsty.value = true
                    // useMsg(d)
                  }
                })
                .catch((err) => console.log(err))
            } else {
              verify_pwdsty.value = true
              useMsg('两次密码不一致', 'error')
            }
          } else {
            pwdsty.value = true
            useMsg('密码错误,由6~12位数字和字母(大写或小写)混合组成', 'error')
          }
        } else {
          phonesty.value = true
          useMsg('手机号错误,请输入正确的手机号', 'error')
        }
      } else {
        usersty.value = true
        useMsg('账号错误,长度为5~12位字母(大小写)、数字或混合组成', 'error')
      }
    }

    return {
      user,
      pwd,
      verify_pwd,
      back_login,
      register,
      yanjing1,
      yanjing2,
      show1,
      show2,
      useMsg,
      usersty,
      pwdsty,
      verify_pwdsty,
      inputClick,
      feature,
      phone,
      phonesty,
      sex,
      fileList,
      dialogImageUrl,
      dialogVisible,
      handlePictureCardPreview,
      handleRemove
    }
  }
}
</script>
<style lang="less" scoped>
.wap {
  width: 100vw;
  height: 100vh;
  min-width: 1200px;
  // background: url(/imgs/000.gif) no-repeat;
  // background-size: cover;
  background-image: linear-gradient(to bottom right, #f8f1c7, #eeecde);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  .login {
    width: 800px;
    background-image: linear-gradient(
      to bottom,
      rgba(249, 239, 241, 0.8),
      rgba(255, 255, 255, 0.8)
    );
    border: 1px solid #ccc;
    border-radius: 10% 25%;
    border-bottom: #cdbf62 8px solid;
    border-left: #cdbf62 8px solid;
    border-right: #cdbf62 8px dashed;
    border-top: #cdbf62 8px dashed;
    padding: 20px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    .user {
      width: 450px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px 0;
      span {
        width: 90px;
        text-align: center;
      }
    }
    .sex {
      width: 450px;
      height: 50px;
      display: flex;

      // justify-content: space-between;
      align-items: center;
      span {
        width: 90px;
        text-align: center;
      }
    }
    input {
      width: 360px;
      border: 1px solid #ccc;
      height: 30px;
      border-radius: 5px;
    }
    input:focus {
      border: 1px solid #333;
      outline: none; //这个可以把原来的线去掉
    }
    .stress {
      width: 360px;
      border: 2px solid #e90505;
      height: 30px;
      border-radius: 5px;
    }
    .pwd {
      width: 450px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // margin: 20px 0 0 0;
      margin: 10px 0;
      position: relative;
      span {
        width: 90px;
        text-align: center;
      }
      img {
        width: 25px;
        height: 20px;
        position: absolute;
        right: 5px;
        top: 15px;
      }
    }
    .head_img {
      width: 450px;
      display: flex;
      margin: 10px 0;
      span {
        margin-right: 20px;
      }
    }
    button {
      width: 100px;
      height: 30px;
      margin: 0 15px;
      cursor: pointer;
    }
    .login_but {
      background-color: #f8f1c7;
    }
  }
}
</style>